<template>
  <div class="shopping-page">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
          v-model="searchKeyword"
          placeholder="请输入商品名称"
          class="search-input"
          @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button @click="handleSearch">
            <el-icon><Search /></el-icon>
          </el-button>
        </template>
      </el-input>
    </div>

    <!-- 轮播图区域 -->
    <div class="banner-container">
      <el-carousel :interval="3000" arrow="always" indicator-position="none">
        <el-carousel-item>
          <img src="@/assets/banner3.png" alt="双11秒杀" class="banner-image" @click="$router.push('/user/seckill/eleven')" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/banner4.png" alt="百亿补贴" class="banner-image" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 分类标签栏 -->
    <div class="category-tabs">
      <el-tabs v-model="activeTab" type="card" @tab-change="handleTabChange">
        <el-tab-pane label="家电" name="家电"></el-tab-pane>
        <el-tab-pane label="数码" name="数码"></el-tab-pane>
        <el-tab-pane label="服饰" name="服饰"></el-tab-pane>
        <el-tab-pane label="美妆" name="美妆"></el-tab-pane>
        <el-tab-pane label="潮玩" name="潮玩"></el-tab-pane>
        <el-tab-pane label="运动" name="运动"></el-tab-pane>
      </el-tabs>
    </div>

    <!-- 商品列表区域 -->
    <div class="goods-list-container">
      <div v-if="loading" class="loading">加载中...</div>
      <div v-else-if="error" class="error">{{ error }}</div>
      <div v-else-if="goodsList.length === 0" class="empty">该分类暂无商品</div>
      <div v-else class="goods-grid">
        <div v-for="item in goodsList" :key="item.id" class="goods-item" @click="goToDetail(item.id)">
          <div class="image-container">
            <img :src="item.image || '@/assets/default-goods.png'" alt="" class="goods-img" :class="{ 'out-of-stock': item.stock === 0 }" />
            <div v-if="item.stock === 0" class="sold-out-overlay">已售空</div>
          </div>
          <h4>{{ item.name }}</h4>
          <p>¥{{ item.price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import goodsApi from '@/api/goods_api.js'
import { Search } from '@element-plus/icons-vue'
import router from '@/router/index.js'

export default {
  name: 'ShoppingPage',
  components: {
    Search
  },

  setup() {
    const activeTab = ref('家电') // 默认选中“家电”
    const goodsList = ref([])
    const loading = ref(false)
    const error = ref('')
    const searchKeyword = ref('')

    // 获取商品列表
    const fetchGoods = async (category) => {
      loading.value = true
      error.value = ''
      try {
        const res = await goodsApi.getGoodsByCategory(category)

        if (res && res.length >= 0) {
          goodsList.value = res
        } else {
          error.value = '获取商品失败'
        }
      } catch (err) {
        error.value = '网络错误，请稍后重试'
        console.error('获取商品列表失败:', err)
      } finally {
        loading.value = false
      }
    }

    // 处理搜索
    const handleSearch = () => {
      if (searchKeyword.value.trim()) {
        // 跳转到商品列表页面，并传递搜索关键词
        router.push({
          name: 'goodsList',
          query: { keyword: searchKeyword.value.trim() }
        })
      }
    }

    // 切换分类时触发
    const handleTabChange = (tabName) => {
      fetchGoods(tabName)
    }

    // 跳转到商品详情页
    const goToDetail = (id) => {
      router.push(`/user/goods-profile/${id}`)
    }

    // 页面挂载时加载默认分类商品
    onMounted(() => {
      fetchGoods(activeTab.value)
    })

    return {
      activeTab,
      goodsList,
      loading,
      error,
      searchKeyword,
      handleTabChange,
      goToDetail,
      handleSearch
    }
  }
}
</script>

<style scoped>
.shopping-page {
  background-color: #fff;
  padding: 20px;
}

/* 搜索栏样式 */
.search-bar {
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
  max-width: 500px;
}

.banner-container {
  width: 100%;
  height: 300px !important; /* 维持原始图片宽高比 */
  margin-bottom: 50px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: fill; /* 保持比例，裁剪填充 */
}

/* 分类标签栏 */
.category-tabs {
  margin-bottom: 20px;
}

.el-tabs--card .el-tabs__item {
  padding: 12px 20px;
  font-size: 16px;
  color: #666;
  border: none;
  border-radius: 4px 4px 0 0;
  transition: all 0.3s;
  flex: 1;
  text-align: center;
  min-width: 0;
  margin: 0 2px;
}

.el-tabs--card .el-tabs__item.is-active {
  background-color: #409eff;
  color: white;
  transform: translateY(-1px);
}

.el-tabs--card .el-tabs__item:hover {
  background-color: #e6f7ff;
  color: #409eff;
}

/* 商品列表容器 */
.goods-list-container {
  margin-top: 20px;
}

.loading, .error {
  text-align: center;
  padding: 20px;
  color: #999;
}

.empty {
  text-align: center;
  padding: 20px;
  color: #999;
}

/* 商品网格布局 - 修改为一行4个 */
.goods-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.goods-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.goods-item:hover {
  transform: translateY(-5px);
}

.image-container {
  position: relative;
  display: inline-block;
}

.goods-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 10px;
}

.goods-img.out-of-stock {
  filter: grayscale(100%);
  opacity: 0.6;
}

.sold-out-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: bold;
  z-index: 1;
}

.goods-item h4 {
  margin: 10px 0;
  font-size: 16px;
  color: #333;
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.goods-item p {
  color: #e64340;
  font-weight: bold;
  font-size: 18px;
  margin: 10px 0;
}

@media (max-width: 1200px) {
  .goods-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .goods-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .goods-grid {
    grid-template-columns: 1fr;
  }

  .goods-item {
    padding: 10px;
  }

  .goods-img {
    height: 150px;
  }
}
</style>
